<template>
    <div class="column-config">
        <el-card class="box-card">
            <!--筛选条件-->
            <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
                <el-form-item label="字段类型" prop="columnType">
                    <el-input v-model="searchForm.columnType" placeholder="字段类型"></el-input>
                </el-form-item>
                <el-form-item label="数据库类型" prop="dbType">
                    <el-select v-model="searchForm.dbType" placeholder="数据库类型">
                        <el-option label="MySQL" value="MySQL"></el-option>
                        <el-option label="Oracle" value="Oracle"></el-option>
                        <el-option label="SQLServer" value="SQLServer"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchSubmit">查询</el-button>
                    <el-button @click="searchReset">重置</el-button>
                </el-form-item>
            </el-form>

            <!--表格操作-->
            <el-row style="text-align: left;margin-bottom: 5px;">
                <el-button type="primary" size="mini" icon="el-icon-document-add" @click="openAddDialog">新增</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeColumnMap">删除</el-button>
            </el-row>

            <!--表格-->
            <template>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            align="center"
                            type="selection"
                            width="40">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="columnType"
                            label="字段类型">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="dbType"
                            label="数据库类型">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="javaType"
                            label="属性类型">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="javaTypePackage"
                            label="属性包名">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="openUpdateDialog(scope.row)">编辑</el-button>
                            <el-button type="text" style="color: #f13636" @click="removeColumnMap(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!--分页-->
            <div class="block">
                <el-pagination
                        align="right"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.pageNum"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                </el-pagination>
            </div>
        </el-card>

        <!--新增或者编辑-->
        <el-dialog :title="dataTitle" :visible.sync="dataFormVisible" width="500px" :before-close="cancelColumnMap">
            <el-form :model="dataForm" :rules="dataRules" ref="dataForm" label-width="100px">
                <el-form-item label="id" prop="id" hidden>
                    <el-input v-model="dataForm.id"></el-input>
                </el-form-item>
                <el-form-item label="数据库类型" prop="dbType" required>
                    <el-select v-model="dataForm.dbType" style="width: 360px;">
                        <el-option label="MySQL" value="MySQL"></el-option>
                        <el-option label="Oracle" value="Oracle"></el-option>
                        <el-option label="SQLServer" value="SQLServer"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字段类型" prop="columnType" required>
                    <el-input v-model="dataForm.columnType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="属性类型" prop="javaType" required>
                    <el-input v-model="dataForm.javaType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="属性包名" prop="javaTypePackage" required>
                    <el-input v-model="dataForm.javaTypePackage" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveColumnMap">确 定</el-button>
                <el-button @click="cancelColumnMap">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {listColumnMap, removeColumnMap, saveColumnMap, updateColumnMap} from "@/api/baseconfig";
    import {Message, MessageBox} from "element-ui";

    export default {
        name: 'columnConfig',
        components: {},
        data() {
            return {
                searchForm: {
                    columnType: '',
                    dbType: ''
                },
                selectRowIds: [],
                page: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },
                tableData: [],
                dataFormVisible: false,
                dataTitle: '',
                // 表单参数
                dataForm: {},
                // 表单校验
                dataRules: {
                    dbType: [
                        {required: true, message: '请选择数据库类型', trigger: 'change'}
                    ],
                    columnType: [
                        {required: true, message: '请输入字段类型', trigger: 'blur'}
                    ],
                    javaType: [
                        {required: true, message: '请输入属性类型', trigger: 'blur'}
                    ],
                    javaTypePackage: [
                        {required: true, message: '请输入属性包名', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.listColumnMap();
        },
        methods: {
            listColumnMap() {
                listColumnMap({
                    pageNum: this.page.pageNum,
                    pageSize: this.page.pageSize,
                    columnType: this.searchForm.columnType,
                    dbType: this.searchForm.dbType
                }).then(res => {
                    this.tableData = res.data.results;
                    this.page.total = res.data.total;
                })
            },
            // 搜索
            searchSubmit() {
                this.listColumnMap();
            },
            // 重置
            searchReset() {
                this.$refs.searchForm.resetFields();
                this.listColumnMap();
            },
            handleSelectionChange(val) {
                this.selectRowIds = [];
                for (let e of val) {
                    this.selectRowIds.push(e.id);
                }
            },
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.listColumnMap();
            },
            handleCurrentChange(val) {
                this.page.pageNum = val;
                this.listColumnMap();
            },
            // 新增弹窗
            openAddDialog() {
                this.dataFormVisible = true;
                this.dataTitle = '新增字段类型映射';
            },
            // 编辑弹窗
            openUpdateDialog(row) {
                this.dataFormVisible = true;
                this.dataTitle = '编辑字段类型映射';
                this.dataForm = Object.assign({}, row);
            },
            // 保存
            saveColumnMap() {
                this.$refs.dataForm.validate((valid) => {
                    if (valid) {
                        const id = this.dataForm.id;
                        if (id != null) {
                            updateColumnMap(id, this.dataForm).then(() => {
                                this.cancelColumnMap();
                                Message.success("修改成功");
                                this.listColumnMap();
                            });
                        } else {
                            saveColumnMap(this.dataForm).then(() => {
                                this.cancelColumnMap();
                                Message.success("新增成功");
                                this.listColumnMap();
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            // 取消
            cancelColumnMap() {
                this.resetForm();
                this.dataFormVisible = false;
            },
            // 重置表单
            resetForm() {
                this.dataForm = {
                    id: undefined,
                    name: undefined,
                    dbType: undefined,
                    url: undefined,
                    username: undefined,
                    password: undefined,
                    remarks: undefined
                };
                this.$refs.dataForm.resetFields();
            },
            // 删除
            removeColumnMap(row) {
                const ids = row.id || this.selectRowIds;
                MessageBox.confirm('是否确认删除所选数据', "系统提示", {
                    type: "warning",
                }).then(() =>
                    removeColumnMap(ids).then(() => {
                        Message.success("删除成功");
                        this.listColumnMap();
                    })
                );
            }
        }
    }
</script>

<style scoped>
    .block {
        margin-top: 10px;
    }
</style>
